<template>
  <div class="control" ref="contRef">
    <div class="top" ref="topRef" title="控制按钮">
      <el-icon v-show="open" class="icon" @click.stop="changeOpen(false)"
        ><Expand
      /></el-icon>
      <el-icon v-show="!open" class="icon" @click.stop="changeOpen(true)"
        ><Fold
      /></el-icon>
    </div>
    <div
      class="bottom"
      :style="{ width: open ? '6vw' : 0, opacity: open ? 1 : 0 }"
    >
      <el-button
        :type="btn.type"
        class="btn"
        v-for="btn of btns"
        @click="handleEvt(btn.evt)"
        >{{ btn.name }}</el-button
      >
    </div>
  </div>
</template>
<script setup>
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import userStore from "@/store/userStore.js";
import { Expand, Fold } from "@element-plus/icons-vue";

const store = userStore();

let btns = [
  { name: "回原点", evt: "origin", type: "danger" },
  { name: "手动", evt: "hand", type: "primary" },
  { name: "开始", evt: "start", type: "primary" },
  { name: "暂定", evt: "parse", type: "primary" },
  { name: "批次完启动", evt: "etb", type: "primary" },
  { name: "报警复位", evt: "clear", type: "primary" },
];

let topRef = ref();
let contRef = ref();

let open = computed(() => store.controlOpen);

function changeOpen(val) {
  store.changeControl(val);
}

function handleEvt(evt) {
  switch (evt) {
    case "origin":
      break;
    case "hand":
      break;
    case "start":
      break;
    case "parse":
      break;
    case "etb":
      break;
    case "clear":
      break;
  }
}

onMounted(() => {
  topRef.value.onmousedown = (e) => {
    let top = contRef.value.offsetTop;
    let { clientY: y1 } = e;
    document.body.onmousemove = (et) => {
      let { clientY: y2 } = et;
      let y = top + (y2 - y1);
      if (y <= 30) {
        y = 30;
      } else if (y >= innerHeight - 100) {
        y = innerHeight - 100;
      }
      contRef.value.style.top = y + "px";
    };
    document.body.onmouseup = () => (document.body.onmousemove = null);
    topRef.value.onmouseleave = () => (document.body.onmousemove = null);
  };
});

onBeforeUnmount(() => {
  topRef.value.onmousedown = null;
});
</script>
<style scoped lang="scss">
.control {
  position: fixed;
  top: 100px;
  right: -1px;
  z-index: 999;
  .top {
    cursor: move;
  }
  .icon {
    color: aqua;
    font-size: 40px;
    cursor: pointer;
  }
  .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba($color: #9ad2e7, $alpha: 0.2);
    padding-left: 5px;
    padding-top: 20px;
    border-radius: 5px;
    transition: all 1s;
    overflow: hidden;
    .btn {
      width: 100%;
      margin-left: 0;
      margin-bottom: 20px;
    }
  }
}
</style>
